<template>
    <div>
      <el-form inline>
        <el-form-item label="一级分类">
          <!--
            选择器
              el-select.v-model : 绑定值
              el-select.placeholderl : 占位符
            选择器单位
              el-option.value	选项的值
              el-option.label	选项的标签，若不设置则默认与 value 相同
          -->
          <el-select :disabled="disabled" v-model="firstValue" placeholder="请选择"
                     @change="getSecondOptions">
            <el-option v-for="item in firstOptions"
              :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select :disabled="disabled" v-model="secondValue" placeholder="请选择"
                     @change="getThirdOptions">
            <el-option v-for="item in secondOptions"
                       :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select :disabled="disabled" v-model="thirdValue" placeholder="请选择"
                     @change="getEnd">
            <el-option v-for="item in thirdOptions"
                       :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    export default {
      name: "CategorySelector",
      props:["disabled"],
      data() {
        return {
          //一级分类的选项和值
          firstOptions: [],
          firstValue: '',
          //二级分类的选项和值
          secondOptions: [],
          secondValue: '',
          //三级分类的选项和值
          thirdOptions: [],
          thirdValue: '',
        }
      },

      methods:{
        //一级分类产生改变   发送请求获取二级分类的数据
        async getSecondOptions(firstValue){
          //清空二三级分类的数据
          this.secondOptions=[];
          this.secondValue='';
          this.thirdOptions=[];
          this.thirdValue='';

          //重新获取二级分类数据
          const {data:secondOptions} = await this.$API.product.attr.getCategory2(firstValue);
          this.secondOptions = secondOptions;

          //往外暴露一级分类的状态
          this.$emit("change",{level:1,value:firstValue})
        },

        //二级分类产生改变 发送请求获取三级分类的数据
        async getThirdOptions(secondValue){
          //清空三级分类的数据
          this.thirdOptions=[];
          this.thirdValue='';

          //重新获取三级分类数据
          const {data:thirdOptions} = await this.$API.product.attr.getCategory3(secondValue);
          this.thirdOptions = thirdOptions;

          //往外暴露二级分类的状态
          this.$emit("change",{level:2,value:secondValue})
        },

        //三级分类产生改变
        getEnd(thirdValue){
          //往外暴露二级分类的状态
          this.$emit("change",{level:3,value:thirdValue})
        }
      },

      async mounted(){
        //发送请求获取一级分类的数据
        const {data:firstOptions} = await this.$API.product.attr.getCategory1();
        this.firstOptions = firstOptions;
      }
    }
</script>

<style scoped>

</style>
